<template>
    <div style="position:relative">
        <Row :gutter="16" style="position:relative">
            <Col v-for="(item,index) in data" :key="index" span="6" style="margin:10px 0">
                <Card>
                    <p slot="title">{{ item.album_name.zh?item.album_name.zh:item.album_name.mn }}(共{{item.counts}}张)</p>
                    <p style="margin-bottom: 16px;">
                        <img :src="(item.cover!=null && item.cover!=0) ? item.cover : 'http://1.180.78.87/dc/framework/common/images/noPic_150x150.jpg'" width="100%" height="262">
                    </p>
                    <p>
                        <Button type="primary" size="small" @click="UpdateData(item)" icon="edit"></Button>
                        <Button type="primary" size="small" icon="plus-round" @click="UpdateDataPl(item)"></Button>
                        <Button v-if="item.counts!=0" type="success" size="small" icon="ios-eye" @click="AlbumSubmitPlLook(item)"></Button>
                        <Poptip
                                confirm
                                title="您确认删除这条内容吗？"
                                @on-ok="remove(item.album_type_id)">
                            <Button type="error" size="small" icon="trash-b"></Button>
                        </Poptip>
                    </p>
                </Card>
            </Col>
            <Spin size="large" fix v-if="state" style="z-index:99999"></Spin>
        </Row>
        <Modal v-model="promptpic" :title="prompttitle">
            <class-pic v-if="promptpic" :classpicinfo="classpicinfo" :classpictype='classpictype' :infoId="infoId" @on-save="savefun"></class-pic>
            <div slot="footer">
                <Button long  @click="promptpic=false">取消</Button>
            </div>
        </Modal>
        <orh-sidebar v-model="show" title="图片集" cover>
            <component :is="'PhotoAlbumPlEdit'" :infoIdPl="infoIdPl" @backList="queryData(infoId)"></component>
        </orh-sidebar> 
    </div>
</template>
                
<script>
export default {
    props:['infoId'],
    components: {
        PhotoAlbumPlEdit: resolve => {require(['./PhotoAlbumPlEdit.vue'], resolve);},
        ClassPic:resolve => {require(['../ClassPic.vue'], resolve);},	
    },
    data () {
        return {
            prompttitle:null,
            promptpic:false,
            classpicinfo:null,

            infoIdPl:null,
            state:true,

            show:null,
            data:[],
            url:'api/eclass/v1/album/ecalss_ablum_lists?eclass_id=',
            delUrl:'api/eclass/v1/album/delete/',
            del:null,
        }
    },

    methods: {

        /************************************************************
         * 
         * 查询本班级所有相册
         * 
         ************************************************************/
        queryData(index){
            this.data = []
            this.state = true
            this.$http.get(this.url+index).then(val=>{
                this.data = val.data
                this.state = false
            }).catch(err => {
                if (err.code && err.code == 422) {
                    this.$Message.error(err.message);
                }
            })
        },
    
        /************************************************************
         * 
         * 删除
         * 
         ************************************************************/
        remove (index) {
            this.del = []
            this.del.push(parseInt(index))
            this.asyncOK()
        },
        
        /************************************************************
         * 
         * 执行删除操作
         * 
         ************************************************************/
        asyncOK () {
            this.del = JSON.stringify(this.del)
            this.$http.delete(this.delUrl+this.del).then(val=>{
                this.data = []
                this.queryData(this.infoId)
                this.$Message.success(val.message);
            }).catch(err => {
                if (err.code && err.code == 422) {
                    this.$Message.error(err.message);
                }
            })
        },
     
     
        /************************************************************
         * 
         * 班级相册修改
         * 
         ************************************************************/
        UpdateData(index){
            console.log(index)
            this.prompttitle='修改相册'
            this.classpicinfo = index
            this.classpictype='one'
            this.promptpic=true
        },

        /************************************************************
         * 
         * 班级相册添加成功后返回
         * 
         ************************************************************/
        savefun(val){
            this.promptpic = val;
            this.queryData(this.infoId)  
        },

        /************************************************************
         * 
         * 班级相片集添加
         * 
         ************************************************************/
        UpdateDataPl(index){
            this.prompttitle='添加相片集'
            this.classpicinfo = index
            this.classpictype='all'
            this.promptpic=true
        },

        /************************************************************
         * 
         * 班级相片集查看
         * 
         ************************************************************/
        AlbumSubmitPlLook(index){
            this.show=true
            this.infoIdPl = index.album_type_id
        }
    },
    mounted(){
        this.queryData(this.infoId)
    },
}
</script>       


